<style lang="scss" scoped>
	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.box {
		width: 690rpx;
		padding: 30rpx 20rpx;
		background: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0rpx 32rpx 20rpx -20rpx #e6ebf2;
		margin-top: 30rpx;

		.line {
			width: 100%;
			height: 100rpx;
			border-top: 1px solid #eeeeee;

			.ipt {
				width: 500rpx;
				text-align: right;
			}
		}

		.line2 {
			width: 100%;
			border-top: 1px solid #eeeeee;
			align-items: flex-start;

			.des {
				width: 500rpx;
				text-align: justify;
			}
		}

		.sbtn {
			width: 184rpx;
			height: 64rpx;
			background: #fffefe;
			border: 2rpx solid #409eff;
			border-radius: 34rpx;
		}

		.imgboxs {
			width: 100%;
			flex-wrap: wrap;

			.imgbox {
				width: 148rpx;
				height: 148rpx;
				border: 2rpx solid #dee2ee;
				border-radius: 10rpx;
				position: relative;
				margin-right: 18rpx;

				.photo {
					width: 100%;
					height: 100%;

				}

				.close {
					position: absolute;
					width: 32rpx;
					height: 32rpx;
					right: -16rpx;
					top: -16rpx;
				}
			}

			.imgbox:nth-child(4n) {

				margin-right: 0rpx;
			}
		}
	}

	.lbtn {
		margin: 60rpx auto;
	}

	.bottombox {
		width: 100%;
		height: 450rpx;

	}
</style>

<template>
	<view class="content">
		<view class="box p-bottom30">
			<view class="f32 bold textColor">基础信息</view>
			<u-line margin="30rpx 0"></u-line>
			<view class="gray align-flex m-top30">
				<view>编号</view>
				<view class="textColor p-left20">{{info.code}}</view>
			</view>
			<view class="gray align-flex m-top30">
				<view>名称</view>
				<view class="textColor p-left20">{{info.name}}</view>
			</view>
		</view>
		<view class="box">
			<view class="f32 bold textColor">巡检内容</view>
		</view>
		<view class="box" v-for="item,index in info.details" :key="index">
			<view class="f28 bold textColor m-bottom30">{{item.inspectionRemark}}</view>
			<view class="line between-flex f28">
				<view class="gray">实测值</view>
				<picker class="choosearea" mode="selector" :range="info.details[index].chooseValue"
					@change="choose($event,index)" v-if="item.chooseValue">
					<view class="blue">{{item.writeValue}}
						<u-icon name='arrow-right'></u-icon>
					</view>
				</picker>
				<view class="align-flex" v-else-if="item.isWrite">
					<input @blur="handleValueWriteValueChange($event,index)" class="ipt" type="digit"
						v-model="info.details[index].writeValue" placeholder="请输入实测值" /> <span
						class="p-left10">{{item.valueUnit | valueUnit}}</span>
				</view>

			</view>
			<view class="line between-flex f28">
				<view class="gray">最终结果</view>
				<ItemRow v-model="item.processResult" @set="(v)=> resultindex = item.processResult"
					dicKey="inspectionResult"></ItemRow>

			</view>

			<view class="line2 between-flex f28 p-top20" v-if="!item.processResult">
				<view class="gray">整改意见</view>
				<textarea class="des textColor" v-model="info.details[index].processRemark" placeholder="请输入整改意见" />

			</view>
		</view>

		<view class="box">
			<view class="f32 bold textColor m-bottom30">巡检信息</view>
			<view class="line between-flex f28">
				<view class="gray">最终结果</view>
				<ItemRow v-model="resultindex" dicKey="inspectionResult"></ItemRow>

			</view>
			<view class="line2 between-flex f28 p-top20">
				<view class="gray">巡检说明</view>
				<textarea class="des textColor" v-model="remark" placeholder="请输入巡检说明" style="height:100rpx;" />
				<!-- <view class="des textColor" >这里是整改意见, 这里是整改意见, 这里是这里是整改意见, 这里是整改意见, 这里是这里是整改意见, 这里是整改意见, 这里是这里是整改意见, 这里是整改意见, 这里是</view> -->
			</view>
			<view v-if="resultindex==1">
				<view class="line between-flex f28">
					<view class="gray">巡检异常处理方法</view>
					<ItemRow v-model="makeindex" dicKey="errorMake"></ItemRow>

				</view>


				<view class="line between-flex f28">
					<view class="gray">限期日期</view>
					<ItemRow v-model="date" chooseType="date-picker-ymd"></ItemRow>
				</view>
			</view>



			<view v-if="makeindex==1">
				<view class="line between-flex f28">
					<view class="gray">故障分类</view>
					<ItemRow v-model="faultType" dicKey="faultClassification" chooseType="select-dic-cascader">
					</ItemRow>

				</view>
				<view class="line between-flex f28">
					<view class="gray">紧急程度</view>
					<ItemRow v-model="degree" dicKey="gradeUrgency" showDicSelectDefaultValue></ItemRow>

				</view>
				<view class="line between-flex f28">
					<view class="gray">影响范围</view>
					<ItemRow v-model="rangeType" dicKey="faultScope" showDicSelectDefaultValue></ItemRow>

				</view>
				<view class="line2 between-flex f28 p-top20">
					<view class="gray">故障描述</view>
					<textarea class="des textColor" v-model="faultRemark" placeholder="请输入故障描述"
						style="height:100rpx;" />
				</view>
				<view class="line between-flex f28" v-if="dic.inspectionResult[resultindex]!=1">
					<view class="gray">预计工时</view>
					<input class="ipt" type="digit" v-model="reqTime" placeholder="请输入预计工时(单位:小时)" />
				</view>
				<view class="line between-flex f28">
					<view class="gray">指派人员</view>
					<ItemRow v-model="people" chooseType="select-user"></ItemRow>
				</view>

			</view>

		</view>
		<!-- 	<view class="box" style="padding-bottom: 0;">
			<view class="m-bottom30 between-flex">
				<view class="f32 bold textColor ">录音</view>
				<view class="sbtn center-flex blue" @click="showRecord=true">开始录音</view>
			</view>

			<view class="line between-flex f28" v-for="item,index in enclosure" :key="index">
				<view class="align-flex blue" @click="playVoice(item.url)">
					<u-icon name="play-circle"></u-icon>{{item.fileName.substring(item.fileName.length-10)}}
				</view>
				<view class="gray" @click="delfile(index)">
					<u-icon name='close'></u-icon>
				</view>
			</view>
			
		</view> -->
		<view class="box">
			<view class="m-bottom30 ">
				<view class="f32 bold textColor ">照片</view>
			</view>
			<view class="imgboxs flex">
				<view class="imgbox center-flex" v-for="item,index in images" :key="index">
					<image class="photo" :src="item.url | image" mode=""></image>
					<image @click="delImg(index)" class="close" src="../static/images/close.png" mode=""></image>
				</view>
				<view class="imgbox center-flex" @click="chooseImg()" v-if="images.length<9">
					<u-icon name="plus"></u-icon>
				</view>
			</view>
		</view>
		<view class="lbtn" @click="submit">提交</view>
		<wyb-loading @hide="hide" ref="loading" type="rectangle" title="录音播放中" loading-type="scale-line" />
		<u-popup v-model="showRecord" mode="bottom">
			<view class="bottombox">
				<sound-recording @cancel="showRecord=false" @confirm="confirm"></sound-recording>
			</view>
		</u-popup>


	</view>
</template>

<script>
	var time
	import operator from '@/static/js/transform.js'
	const innerAudioContext = uni.createInnerAudioContext();
	import wybLoading from '@/components/wyb-loading/wyb-loading.vue'
	innerAudioContext.autoplay = true;
	import soundRecording from '@/components/sound-recording/sound-recording.vue'
	import PagesCourseRouterConfig from '@/pagesCourse/routerConfig.js'
	import ItemRow from '@/components/arrow/itemArrow.vue'
	export default {
		components: {
			wybLoading,
			soundRecording,
			ItemRow
		},
		data() {
			return {
				PagesCourseRouterConfig,
				head: this.$head,
				executeId: 0,
				info: {},
				processResult: ['正常', '异常'],
				dic: uni.getStorageSync('dic'),
				resultindex: null, //最终结果
				makeindex: 0, //异常处理方法
				date: '', //整改日期
				remark: '', //巡检说明
				enclosure: [], //附件
				showRecord: false,
				images: [],
				faultType: null, //故障分类
				faultRemark: '',
				reqTime: '',
				degree: null,
				rangeType: null,
				people: null //工单指派人员
			}
		},

		onLoad(e) {
			operator.eq()
			this.executeId = e.executeId
			this.getinfo()

			innerAudioContext.onEnded(() => {
				this.$refs.loading.hideLoading()
			});
			this.reset()
		},
		methods: {
			reset() {

				var dic = uni.getStorageSync('dic')
				dic.gradeUrgency.forEach(item => {
					if (item.id == 65) {
						this.degree = item
					}
				})
				dic.faultScope.forEach(item => {
					if (item.id == 66) {
						this.rangeType = item
					}
				})
				this.reqTime = 0.5

			},
			choose(e, index) {

				this.info.details[index].writeValue = this.info.details[index].chooseValue[e.detail.value]

				this.$forceUpdate()
				let row = this.info.details[index]
				this.handleOptionWriteValueChange(row, index)
			},
			// 实测值变化-选项 触发
			async handleOptionWriteValueChange(row, index) {

				const exceptionValue = row.chooseException.split(',');
				if (exceptionValue.includes(row.writeValue)) {
					this.info.details[index].processResult = 0;
				} else {
					this.info.details[index].processResult = 1;
				}
				this.confirmTotalResult();
			},
			// 实测值变化-数值 触发
			async handleValueWriteValueChange(e, index) {
				console.log('执行这里')

				let row = this.info.details[index]
				const min = row.minValue
				const max = row.maxValue

				const writeValue = row.writeValue;
				if (min && writeValue < min) {
					this.$msg(`实测值范围为${min}~${max}`)
					this.info.details[index].writeValue = ''
					return
				}
				if (max && writeValue > max) {
					this.$msg(`实测值范围为${min}~${max}`)
					this.info.details[index].writeValue = ''
					return
				}
				const exceptionValue = JSON.parse(row.exceptionValue);

				const result = exceptionValue.reduce((result, item) => {
					if (item.logicOperator === 'and') {
						operator[item.operator](writeValue, item.value) && result;
					} else if (item.logicOperator === 'or') {
						return operator[item.operator](writeValue, item.value) || result;
					} else {
						return operator[item.operator](writeValue, item.value);
					}
				}, true);
				this.info.details[index].processResult = result ? 0 : 1;
				// this.confirmTotalResult();
			},

			// 确认整体结果
			async confirmTotalResult() {
				const details = this.info.details;
				let totalResult = 0; // 0正常 1异常
				details.map(item => {
					// 0异常 1 正常
					if (item.processResult === 0) {
						totalResult = 1;
					}
				});
				this.resultindex = totalResult;
			},
			submit() {
				var obj = {
					id: this.executeId,
					result: this.dic.inspectionResult[this.resultindex].value,
					remark: this.remark,
					errorMake: this.dic.errorMake[this.makeindex].value,

					details: JSON.stringify(this.info.details)

				}
				if (this.resultindex == 1 && !this.date) {
					this.$msg('请选择期限日期')
					return
				} else if (this.resultindex == 1) {
					obj.rectificationTime = new Date(this.date).getTime()
				}
				if (this.makeindex == 1 && !this.faultType) {
					this.$msg('请选择故障分类')
					return
				} else if (this.makeindex == 1) {
					obj.faultType = this.faultType
				}
				if (this.makeindex == 1 && !this.faultRemark) {
					this.$msg('请输入故障描述！')
					return
				} else if (this.makeindex == 1) {
					obj.faultRemark = this.faultRemark
				}

				if (this.makeindex == 1 && !this.degree) {
					this.$msg('请选择紧急程度！')
					return
				} else if (this.makeindex == 1) {
					obj.degree = this.degree
				}
				if (this.makeindex == 1 && !this.rangeType) {
					this.$msg('请选择影响范围！')
					return
				} else if (this.makeindex == 1) {
					obj.rangeType = this.rangeType
				}
				if (this.makeindex == 1 && !this.reqTime) {
					this.$msg('请输入预计工时！')
					return
				} else if (this.makeindex == 1) {
					obj.reqTime = this.reqTime
				}
				if (this.makeindex == 1 && !this.people) {
					this.$msg('请选择指派人员！')
					return
				} else if (this.makeindex == 1) {
					obj.dispatchUser = this.people
				}



				if (this.images.length > 0) {
					let processPhoto = []

					this.images.forEach(item => {
						processPhoto.push({
							name: item.oldName,
							url: item.url
						})
					})
					obj.processPhoto = JSON.stringify(processPhoto)
				} else {
					this.$msg('请上传照片！')
					return
				}
				this.$showloading()
				this.$pop.ajaxPost('/bus/inspection/work/confirm', obj).then(res => {
					uni.hideLoading()
					if (res.code == 0) {
						this.$msg(res.msg)
						setTimeout(() => {
							uni.navigateBack({

							})
						}, 1500)
					} else {
						this.$msg(res.msg)
					}
				})
			},

			chooseRange(e) {
				this.rangeType = this.dic.faultScope[e.detail.value]
			},
			chooseImg() {
				var that = this
				uni.chooseImage({
					count: 9 - this.images.length,
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'],
					success: function(res) {

						// 判断文件类型
						var tempFilePaths = res.tempFilePaths;

						tempFilePaths.forEach(item => {
							uni.uploadFile({
								url: 'https://jinyiweikeji.com/ywt/busLocalFile/upload',
								filePath: item,
								header: {
									token: uni.getStorageSync('token')
								},

								name: 'file',
								success: uploadFileRes => {
									let file = uploadFileRes.data;
									file = JSON.parse(file);
									console.log('file', file)
									that.images.push(file.body.body)

								}
							});
						})

					},
					fail: (err) => {
						console.log('err', err)
					}
				});


			},
			playVoice(src) {
				console.log('播放录音');

				if (src) {
					var a = src.slice(0, 4)
					if (a === 'http') {
						src = src
					} else if (src) {
						src = uni.getStorageSync('imgUrl') + src
					}
					console.log(src)
					this.$refs.loading.showLoading() // 显示
					innerAudioContext.src = src;
					innerAudioContext.play();
				}
			},
			hide() {
				innerAudioContext.stop();
			},
			confirm(e) {
				this.showRecord = false
				uni.showLoading({
					title: '上传中...'
				})
				uni.uploadFile({
					url: 'https://jinyiweikeji.com/ywt/busLocalFile/upload',
					filePath: e,
					header: {
						token: uni.getStorageSync('token')
					},

					name: 'file',
					success: uploadFileRes => {
						let file = uploadFileRes.data;
						file = JSON.parse(file);
						console.log(file)
						uni.hideLoading()
						this.enclosure.push(file.body.body)
					}
				});
			},

			delfile(index) {
				this.enclosure.splice(index, 1)
			},
			delImg(index) {
				this.images.splice(index, 1)
			},



			chooseDate(e) {
				console.log(e)
				this.date = e.detail.value
			},
			getinfo() {
				this.$pop.ajaxPost('/bus/inspection/work/info', {
					id: this.executeId
				}).then(res => {
					this.info = res.body
					this.info.details.forEach((item, index) => {

						if (item.chooseValue) {
							item.chooseValue = item.chooseValue.split(',')
						}
						if (typeof(item.processResult) == 'object') {

							item.processResult = 1
							this.$forceUpdate()
						}
						if (item.chooseValue) { //有选项
							if (!item.writeValue) {
								item.writeValue = item.chooseDefault

							}
							this.handleOptionWriteValueChange(item, index)
						} else {
							if (!item.writeValue) {
								item.writeValue = item.defaultValue

							}
							this.handleValueWriteValueChange(item, index)
						}

					})
					console.log(this.info.details)
				})
			}

		}
	}
</script>
